---
title: Kbd
description: Used to show key combinations for an action
links:
  source: components/kbd
  storybook: components-kbd--basic
  recipe: kbd
---

<ExampleTabs name="kbd-basic" />

## Usage

```jsx
import { Kbd } from "@chakra-ui/react"
```

```jsx
<Kbd>F12</Kbd>
```

## Examples

### Combinations

Render `Kbd` to showcase key combinations

<ExampleTabs name="kbd-with-combinations" />

### Function Keys

Here's an example of using `Kbd` to showcase function keys

<ExampleTabs name="kbd-function-keys" />

### Variants

Use the `variant` prop to change the appearance of the `Kbd` component

<ExampleTabs name="kbd-with-variants" />

### Sizes

Use the `size` prop to change the size of the `Kbd` component

<ExampleTabs name="kbd-with-sizes" />

### Within Text

Use `Kbd` within text to highlight key combinations

<ExampleTabs name="kbd-within-text" />

## Props

<PropTable component="Kbd" part="Kbd" />
